<template>
    <div id="news">
        <tab-nav></tab-nav>
        <div class="ww news-box">
            <div @click="getListNews($event)">
                <el-tabs v-model="activeName" tab-position="left" style="height: 200px;">
                    <el-tab-pane name="1">
                        <span slot="label" data-class="1"><i class="iconfont">&#xe607;</i>热门专题</span>
                        <ul class="article" ref="art">
                            <el-table
                                    :data="hot.slice((paging.page - 1) * paging.pageSize, paging.page * paging.pageSize)"
                                    style="width: 100%">
                                <el-table-column
                                        label=""
                                        width="100%">
                                    <template slot-scope="scope">
                                        <li @click="toDetail(scope.row.uidpk)">
                                            <a href="javascript:void(0);">
                                                <img :src="scope.row.articleThumbnailBean.thumbnailurl" alt="">
                                                <div class="msg">
                                                    <h2>{{ scope.row.title }}</h2>
                                                    <div class="msg-label">热门</div>
                                                    <p class="cont">{{ scope.row.description | slh(50) }}</p>
                                                    <div class="view">
                                                        <span><i class="iconfont">&#xe620;</i>浏览：<em>2750</em>人</span>
                                                        <span>{{ scope.row.createTime | getTime( "YYYY-MM-DD") }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total=hot.length
                                    hide-on-single-page
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="paging.page"
                                    :page-size="paging.pageSize"
                                    next-text="下一页"
                                    prev-text="上一页"
                            >
                            </el-pagination>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy name="2">
                        <span slot="label" data-class="2"><i class="iconfont">&#xe657;</i>行业资讯</span>
                        <ul class="article">
                            <el-table
                                    :data="dynamics.slice((paging.page - 1) * paging.pageSize, paging.page * paging.pageSize)"
                                    style="width: 100%">
                                <el-table-column
                                        label=""
                                        width="100%">
                                    <template slot-scope="scope">
                                        <li @click="toDetail(scope.row.uidpk)">
                                            <a href="javascript:void(0);">
                                                <img :src="scope.row.articleThumbnailBean.thumbnailurl" alt="">
                                                <div class="msg">
                                                    <h2>{{ scope.row.title }}</h2>
                                                    <div class="msg-label">热门</div>
                                                    <p class="cont">{{ scope.row.description | slh(50) }}</p>
                                                    <div class="view">
                                                        <span><i class="iconfont">&#xe620;</i>浏览：<em>{{ 1|addNum(50,500) }}</em>人</span>
                                                        <span>{{ scope.row.createTime | getTime( "YYYY-MM-DD") }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total=dynamics.length
                                    hide-on-single-page
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="paging.page"
                                    :page-size="paging.pageSize"
                                    next-text="下一页"
                                    prev-text="上一页"
                            >
                            </el-pagination>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy name="3">
                        <span slot="label" data-class="3"><i class="iconfont">&#xe606;</i>创业知识</span>
                        <ul class="article">
                            <el-table
                                    :data="knowledge.slice((paging.page - 1) * paging.pageSize, paging.page * paging.pageSize)"
                                    style="width: 100%">
                                <el-table-column
                                        label=""
                                        width="100%">
                                    <template slot-scope="scope">
                                        <li @click="toDetail(scope.row.uidpk)">
                                            <a href="javascript:void(0);">
                                                <img :src="scope.row.articleThumbnailBean.thumbnailurl" alt="">
                                                <div class="msg">
                                                    <h2>{{ scope.row.title }}</h2>
                                                    <div class="msg-label">热门</div>
                                                    <p class="cont">{{ scope.row.description | slh(50) }}</p>
                                                    <div class="view">
                                                        <span><i class="iconfont">&#xe620;</i>浏览：<em>2750</em>人</span>
                                                        <span>{{ scope.row.createTime | getTime( "YYYY-MM-DD") }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total=knowledge.length
                                    hide-on-single-page
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="paging.page"
                                    :page-size="paging.pageSize"
                                    next-text="下一页"
                                    prev-text="上一页"
                            >
                            </el-pagination>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy name="4">
                        <span slot="label" data-class="4"><i class="iconfont">&#xe669;</i>创业故事</span>
                        <ul class="article">
                            <el-table
                                    :data="story.slice((paging.page - 1) * paging.pageSize, paging.page * paging.pageSize)"
                                    style="width: 100%">
                                <el-table-column
                                        label=""
                                        width="100%">
                                    <template slot-scope="scope">
                                        <li @click="toDetail(scope.row.uidpk)">
                                            <a href="javascript:void(0);">
                                                <img :src="scope.row.articleThumbnailBean.thumbnailurl" alt="">
                                                <div class="msg">
                                                    <h2>{{ scope.row.title }}</h2>
                                                    <div class="msg-label">热门</div>
                                                    <p class="cont">{{ scope.row.description | slh(50) }}</p>
                                                    <div class="view">
                                                        <span><i class="iconfont">&#xe620;</i>浏览：<em>2750</em>人</span>
                                                        <span>{{ scope.row.createTime | getTime( "YYYY-MM-DD") }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total=story.length
                                    hide-on-single-page
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="paging.page"
                                    :page-size="paging.pageSize"
                                    next-text="下一页"
                                    prev-text="上一页"
                            >
                            </el-pagination>
                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="qrcode">
                <h1>扫二维码有惊喜</h1>
                <a href="javascript:void(0);">
                    <img src="./images/qrcode.jpg" alt="">
                </a>
            </div>

            <div class="swiper-container banner fl">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:void(0);">
                            <img src="./images/banner01.png" alt="">
                        </a>
                    </div>
                </div>
                <!--&lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
                <!--<div class="swiper-pagination"></div>-->

                <!--&lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
                <!--<div class="swiper-button-prev"></div>-->
                <!--<div class="swiper-button-next"></div>-->
                <!---->
            </div>

            <!--右边-->
            <news-right></news-right>
        </div>
    </div>
</template>

<script>

    import Swiper from "swiper"
    import tabNav from "@/components/tabBar/tabBar"
    import newsRight from "@/components/newsRight/newsRight"

    const qs = require("qs")

    export default {
        name: "News",
        data() {
            return {
                activeName: "1",
                // 文章数据
                newsList: [],
                // 文章总数
                total: "",
                // // 分页设置
                paging: {
                    // 当前页数
                    page: 1,
                    // 每页条数
                    pageSize: 5,
                    // 总页数
                    total: 1,
                },

                // 热门专题 1
                hot: [],

                // 行业资讯
                // 行业动态 8
                dynamics: [],

                // 创业知识 14
                knowledge: [],

                // 创业故事 15
                story: [],
            }
        },
        methods: {
            lbtInit() {
                new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    // pagination: {
                    //     el: '.swiper-pagination',
                    // },
                    //
                    // // 如果需要前进后退按钮
                    // navigation: {
                    //     nextEl: '.swiper-button-next',
                    //     prevEl: '.swiper-button-prev',
                    // },
                    //
                    // // 如果需要滚动条
                    // scrollbar: {
                    //     el: '.swiper-scrollbar',
                    // },
                })
            },

            // 获取热门专题
            getHot() {
                this.axios.get(this.api.getNewsApi + "1")
                    .then(res => {
                        // console.log(res)
                        this.hot = res.data;
                        this.total = res.data.length
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "请刷新重试!"
                        })
                    })
            },

            // 获取行业动态
            // 获取行业动态
            getDynamics() {
                this.axios.get(this.api.getNewsApi + "8")
                    .then(res => {
                        // console.log(res.data)
                        if (res.status === 200) {
                            this.dynamics = res.data
                            this.total = res.data.length
                        }
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "请刷新重试!"
                        })
                    })
            },

            getKnowledge() {
                this.axios.get(this.api.getNewsApi + "15")
                    .then(res => {
                        // console.log(res.data)
                        if (res.status === 200) {
                            this.knowledge = res.data
                            this.total = res.data.length
                        }
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "请刷新重试!"
                        })
                    })
            },

            getStory() {
                this.axios.get(this.api.getNewsApi + "14")
                    .then(res => {
                        // console.log(res.data)
                        if (res.status === 200) {
                            this.story = res.data
                            this.total = res.data.length
                        }
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "请刷新重试!"
                        })
                    })
            },

            getAll() {
                this.getHot()
                this.getDynamics()
                this.getKnowledge()
                this.getStory()
            },

            // 页码改变
            handleSizeChange() {

            },

            //
            handleCurrentChange(val) {
                this.paging.page = val;
                // console.log(this.paging.page)
                // console.log(this.paging)
                // this.getData()
                document.documentElement.scrollTop = "100"

            },

            // 跳转到新闻详情页面
            toDetail(id) {
                // console.log(id);

                this.$router.push({
                    name: "newsDetails",
                    params: {
                        sid: id
                    }
                })
            },

            // 根据分类查找文章
            getListNews(e) {
                // console.log(e.target)
                // console.log(e.target.getAttribute("id").split("-")[1])
                // var thisList = e.target.getAttribute("id").split("-")[1] ||e.target.getAttribute("data-class")
                // console.log(thisList)
                let thisList;
                // thisList = e.target.getAttribute("data-class")
                if (e.target.getAttribute("data-class") === null) {
                    thisList = e.target.getAttribute("id").split("-")[1]
                } else {
                    thisList = e.target.getAttribute("data-class")
                }
                // console.log(thisList)
            },

        },
        mounted() {
            this.lbtInit()
        },
        created() {
            this.getAll();
            this.activeName = this.$route.params.list
        },
        components: {
            tabNav,
            newsRight
        }
    }
</script>

<style lang="less">
    @import "../../../node_modules/swiper/dist/css/swiper.min.css";

    #news {
        background-color: #f8fbfc;
        height: 1000px;

        .el-table__empty-block {
            width: auto !important;
        }

        .el-table::before {
            height: 0;
        }

        .el-table td, .el-table th.is-leaf {
            border-bottom: none;
            padding: 0;
        }

        .el-table__header-wrapper {
            display: none;
        }


        .el-table--enable-row-hover .el-table__body tr:hover > td {
            background-color: transparent;
        }

        .cell {
            padding-left: 0;
        }

        .el-table__body {
            width: 100% !important;
        }

        // 分页
        .el-pagination {
            margin: 0 auto;
            /*display: flex;*/
            /*justify-content: space-between;*/
            /*width: 715px;*/

            button {
                /*flex: 1;*/
                border: 1px solid #eaeaea;

                &:hover {
                    color: #e8332f;
                }
            }

            .el-pager {
                /*flex: 0 0 300px;*/
                /*display: flex;*/
                /*justify-content: space-between;*/
                margin-left: 20px;

                li {
                    /*flex: 1;*/
                    width: auto;
                    /*border: none;*/
                    margin-right: 20px;

                    &:hover {
                        color: #e8332f;
                    }
                }

                .number {


                    &.active {
                        border-color: #e8332f;
                        background-color: #e8332f;
                        color: #fff;
                    }
                }
            }
        }

        /* 二维码 */

        .qrcode {
            width: 157px;
            background-color: #fff;
            padding-top: 42px;
            padding-bottom: 42px;

            h1 {
                color: #477eff;
                font-size: 12px;
                text-align: center;
                margin-bottom: 10px;
            }

            a {
                display: block;
                width: 104px;
                height: 104px;
                margin: 0 auto;

                img {
                    display: block;
                    width: 100%;

                }
            }
        }

        .news-box {
            margin-top: 20px;
            position: relative;
        }

        .el-tabs {
            position: relative;
        }

        .el-tabs__header {
            background-color: #fff;
        }

        .el-tabs--left {
            overflow: visible;
        }

        .el-tabs__item {
            width: 157px;
            height: 50px;
            padding: 0;
            text-align: center;
            line-height: 50px;

            &.is-active {
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
            }

            &:hover {
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);

                span {
                    color: #ec664e;
                }
            }


            span {
                font-size: 16px;

            }

            &.is-active {
                color: #ec664e;
            }

        }

        .el-tabs__active-bar {
            background-color: transparent;
        }

        .el-tabs__nav-wrap::after {
            width: 0;
        }

        .el-tabs__content {
            position: absolute;
            top: 263px;
            left: 171px;
            width: 750px;
            overflow: visible;

            ul {
                li {

                }
            }
        }

        .banner {
            position: absolute;
            top: 0;
            left: 171px;
            width: 715px;
        }

        /* 文章 */

        .article {
            li {
                width: 715px;
                /*height: 175px;*/
                background-color: #ffffff;
                border: solid 1px #e8eeee;
                margin-bottom: 20px;
                padding-bottom: 12px;

                a {
                    width: 100%;
                    height: 100%;
                    padding-left: 20px;
                    padding-right: 26px;
                    display: flex;
                    justify-content: space-between;

                    img {
                        display: block;
                        flex: 0 0 242px;
                        width: 242px;
                        height: 151px;
                        margin-top: 12px;
                        border-radius: 10px;
                    }

                    .msg {
                        flex: 0 0 406px;
                        padding-top: 21px;

                        h2 {
                            font-size: 20px;
                            color: #1e2629;
                        }

                        .msg-label {
                            width: 51px;
                            height: 19px;
                            border-radius: 9px;
                            border: solid 1px #ff1734;
                            color: #ff0b0f;
                            line-height: 18px;
                            text-align: center;
                            margin-top: 13px;
                            margin-bottom: 9px;
                        }

                        .cont {
                            font-size: 14px;
                            color: #4f646a;
                            width: 406px;
                        }

                        .view {
                            margin-top: 10px;

                            span {
                                text-align: left;
                                line-height: 24px;
                                color: #8aa0a6;

                                &:nth-of-type(1) {

                                    i {
                                        vertical-align: middle;
                                        margin: 10px;
                                    }
                                }

                                &:nth-of-type(2) {
                                    float: right;
                                }
                            }
                        }

                    }
                }
            }
        }


    }
</style>
